<template>
  <div class="message pad">
    <div class="head">
      <span>服务类消息管理</span>
    </div>
    <el-tabs class="m-t-b" type="border-card">
      <el-tab-pane label="服务类消息列表">
        <div class="search-con flex">
          <el-input v-model="search" placeholder="输入昵称查询" clearable @keyup.enter.native="handleSearch" @input="cancelSearch" />
          <el-button @click="handleSearch" type="primary">搜索</el-button>
        </div>
        <el-table stripe class="m-t-b" :data="services" v-loading="loading">
          <el-table-column label="服务名称" prop="serviceName">
          </el-table-column>
          <el-table-column label="服务编号" prop="serviceInfoId">
          </el-table-column>
          <el-table-column label="发送时间" prop="createDate">
          </el-table-column>
          <el-table-column label="昵称" prop="nickname">
          </el-table-column>
          <el-table-column
            label="操作">
            <template slot-scope="scope">
              <el-button @click="serviceInfo(scope.row)" type="text" size="small">
                查看
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          class="m-t-b flex"
          :page-size="pageSize"
          layout="prev, pager, next"
          @current-change="handlePagi"
          :total="total">
        </el-pagination>
      </el-tab-pane>
      <el-tab-pane label="服务类消息模板">
        <el-button @click="addTemplate" type="primary">
          <i class="el-icon-plus"></i>
          添加消息模板
        </el-button>
        <el-table stripe class="m-t-b" :data="templates" v-loading="loading1">
          <el-table-column label="服务名称" prop="serviceName">
          </el-table-column>
          <el-table-column label="提醒编号" prop="remindNum">
          </el-table-column>
          <el-table-column label="话术编辑" prop="remind">
          </el-table-column>
          <el-table-column label="提醒方式" prop="remindType">
          </el-table-column>
          <el-table-column label="提醒次数" prop="remindCount">
          </el-table-column>
          <el-table-column
            label="操作">
            <template slot-scope="scope">
              <el-button @click="updateTemplate(scope.row)" type="text" size="small">
                修改
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          class="m-t-b flex"
          :page-size="pageSize"
          layout="prev, pager, next"
          :current-page="curPage1"
          @current-change="handlePageChange"
          :total="total1">
        </el-pagination>
      </el-tab-pane>
    </el-tabs>
    <el-dialog :title="dialogTitle" :visible.sync="showDialog" @close="cancelAdd">
      <el-form :model="newService" :rules="rules" ref="template">
        <el-form-item prop="serviceName" label="服务名称">
          <el-input v-model="newService.serviceName" />
        </el-form-item>
        <el-form-item prop="remind" label="话术编辑">
          <el-input type="textarea" rows="3" v-model="newService.remind" />
        </el-form-item>
        <el-form-item prop="remindNum" label="提醒编号">
          <el-input v-model="newService.remindNum" />
        </el-form-item>
        <el-form-item prop="remindType" label="提醒方式">
          <!-- <el-input v-model="newService.remindType" /> -->
          <el-select v-model="newService.remindType">
            <el-option v-for="(item, i) in ways" :label="item" :value="item" :key="i"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="服务次数">
          <el-input-number v-model="newService.remindCount" :min="1" :max="10"></el-input-number>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelAdd">取 消</el-button>
        <el-button type="primary" @click="handleAdd('template')">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="消息内容详情" :visible.sync="showMessageDialog">
      <p>{{message}}</p>
      <div slot="footer" class="dialog-footer">
        <el-button plain @click="showMessageDialog = false">取 消</el-button>
      </div>
    </el-dialog>
    <el-dialog title="修改消息模板" :visible.sync="showUpdateDialog">
      <el-form :model="service" :rules="rules" ref="template1">
        <el-form-item prop="serviceName" label="服务名称">
          <el-input v-model="service.serviceName" />
        </el-form-item>
        <el-form-item prop="remind" label="话术编辑">
          <el-input type="textarea" rows="3" v-model="service.remind" />
        </el-form-item>
        <el-form-item prop="remindNum" label="提醒编号">
          <el-input v-model="service.remindNum" />
        </el-form-item>
        <el-form-item prop="remindType" label="提醒方式">
          <!-- <el-input v-model="service.remindType" /> -->
          <el-select v-model="service.remindType">
            <el-option v-for="(item, i) in ways" :label="item" :value="item" :key="i"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="服务次数">
          <el-input-number v-model="service.remindCount" :min="1" :max="10"></el-input-number>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showUpdateDialog = false">取 消</el-button>
        <el-button type="primary" @click="handleUpdate('template1')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  getServiceMsgList,
  addServiceMsgTemplate,
  getServiceMsgTemplateList,
  updateServiceMsgTemplate
} from '../api'
import { formatDate } from '../util'
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

export default {
  name: 'message',
  data () {
    return {
      pageSize: 10,
      loading: true,
      loading1: true,
      curPage: 1,
      curPage1: 1,
      showMessageDialog: false,
      showUpdateDialog: false,
      showDialog: false,
      dialogTitle: '添加消息模板',
      search: '',
      total: 0,
      total1: 0,
      message: '',
      ways: [
        '站内消息',
        '微信消息',
        '其它'
      ],
      service: {
        serviceName: '',
        remind: '',
        remindNum: '',
        remindType: '',
        remindCount: 1
      },
      newService: {
        serviceName: '',
        remind: '',
        remindNum: '',
        remindType: '',
        remindCount: 1
      },
      rules: {
        serviceName: [
          { required: true, message: '请输入服务名称', trigger: 'blur' },
          { min: 3, max: 15, message: '长度为 3 到 15 个字符' }
        ],
        remind: [
          { required: true, message: '请编辑话术', trigger: 'blur' },
          { min: 5, max: 50, message: '长度为 5 到 50 个字符' }
        ],
        remindNum: [
          { required: true, message: '请填写提醒编号', trigger: 'blur' }
        ],
        remindType: [
          { required: true, message: '请选择提醒方式', trigger: 'change' }
        ]
      },
      services: [],
      templates: []
    }
  },
  methods: {
    cancelSearch () {
      if (!this.search) {
        this.fetchServiceMsgList(1)
      }
    },
    handlePageChange (page) {
      this.fetchServiceMsgTemplateList(page)
    },
    serviceInfo (data) {
      if (!this.$checkAuth('canSeeMessageDetail')) {
        return this.$message.error('暂无对应操作权限!')
      };
      this.message = data.serviceInfo;
      this.showMessageDialog = true
    },
    handleSearch () {
      if (!this.$checkAuth('canSearch')) {
        return this.$message.error('暂无对应操作权限!')
      };
      if (!this.search.trim()) {
        this.search = ''
        return this.$message.error('请输入搜索内容!')
      }
      NProgress.start()
      this.fetchServiceMsgList(1, this.search)
      NProgress.done()
    },
    handlePagi (page) {
      if (this.search.trim()) {
        this.fetchServiceMsgList(page, this.search)
      } else {
        this.fetchServiceMsgList(page)
      }
    },
    updateTemplate (data) {
      if (!this.$checkAuth('canEditMessageTemplate')) {
        return this.$message.error('暂无对应操作权限!')
      };
      this.service.serviceName = data.serviceName;
      this.service.remind = data.remind;
      this.service.remindNum = data.remindNum;
      this.service.remindType = this.ways.includes(data.remindType) ? data.remindType : '其它';
      this.service.remindCount = data.remindCount;
      this.service.templateId = data.templateId;
      // this.service = data
      this.showUpdateDialog = true
    },
    addTemplate () {
      if (!this.$checkAuth('canAddMessageTemplate')) {
        return this.$message.error('暂无对应操作权限!')
      };
      this.isUpdate = false
      this.newService.serviceName = ''
      this.newService.remind = ''
      this.newService.remindNum = ''
      this.newService.remindType = ''
      this.newService.remindCount = 1
      this.dialogTitle = '添加消息模板'
      this.showDialog = true
    },
    cancelAdd () {
      this.showDialog = false;
    },
    handleAdd (form) {
      this.$refs[form].validate(valid => {
        if (valid) {
          addServiceMsgTemplate(this.newService)
          .then(res => {
            if (res.data.code === 1) {
              this.$message({
                type: 'success',
                message: '操作成功!'
              })
              this.showDialog = false
              this.fetchServiceMsgTemplateList(1)
            } else {
              this.$message.error(res.data.msg || '网络异常!')
            }
          })
          .catch(e => {
            this.$message.error('网络异常!')
          })
        } else {
          return false
        }
      })
    },
    fetchServiceMsgList (index, nickname) { // 获取服务类消息列表
      nickname = nickname || null;
      this.loading = true;
      getServiceMsgList({
        index,
        count: this.pageSize,
        queryParam: {
          nickname
        }
      })
      .then(res => {
        if (res.data.code === 1) {
          this.total = res.data.data.totalRecord;
          let list = res.data.data.list || [];
          let len = list.length;
          for (let i = 0; i < len; i ++) {
            list[i].createDate = formatDate(list[i].createDate)
          };
          this.services = list
        } else {
          this.$message.error(res.data.msg || '网络异常!')
        };
        this.loading = false
      })
      .catch(e => {
        this.$message.error('网络异常!');
        this.loading = false
      })
    },
    fetchServiceMsgTemplateList (index) { // 获取服务类消息模板列表
      this.loading1 = true;
      getServiceMsgTemplateList({
        index,
        count: this.pageSize
      })
      .then(res => {
        if (res.data.code === 1) {
          this.total1 = res.data.data.totalRecord
          this.templates = res.data.data.list || []
        } else {
          this.$message.error(res.data.msg || '网络异常!')
        };
        this.loading1 = false
      })
      .catch(e => {
        this.$message.error('网络异常!');
        this.loading1 = false
      })
    },
    handleUpdate (form) {
      this.$refs[form].validate(valid => {
        if (valid) {
          updateServiceMsgTemplate({
            templateId: this.service.templateId,
            serviceName: this.service.serviceName,
            remind: this.service.remind,
            remindType: this.service.remindType,
            remindNum: this.service.remindNum,
            remindCount: this.service.remindCount
          })
          .then(res => {
            if (res.data.code === 1) {
              this.$message({
                type: 'success',
                message: '操作成功!'
              })
              this.showUpdateDialog = false
              this.fetchServiceMsgTemplateList(1)
            } else {
              this.$message.error(res.data.msg || '网络异常!')
            }
          })
          .catch(e => {
            this.$message.error(e)
          })
          .catch(e => {

          })
        } else {
          return false
        }
      })
    }
  },
  created () {
    this.fetchServiceMsgList(1)
    this.fetchServiceMsgTemplateList(1)
  }
}
</script>
<style lang="scss">
  .message {
    .cell {
      text-align: center;
    }
  }
</style>
